/**
 * 门店信息设置的表单
 * @author: minzhang
 * @update: 2017-03-09
 */

import React, {PropTypes} from 'react';
import {Row, Col, Button, Spin, Form, message, Input, Upload, Icon, Cascader, Switch, TimePicker } from 'antd';
import CommonPhoneInput from '../Common/CommonPhoneInput';
import CommonSeparated from '../Common/CommonSeparated';
import CommonToggle from '../Common/CommonToggle';
import CommonUpload from '../Common/CommonUpload';
import styles from './StoreInfoForm.less';
import moment from 'moment';

const FormItem = Form.Item;

const StoreInfoForm = ({
	loading,
	btnLoading,
	item,
	phone,
	mainMapList,
	envMapList,
	isAllDay,
	onPhoneChange,
	onSwitchChange,
	dayilyBillTime,
	onBillTimeChange,
	onUploadChange,
  onUploadRemove,
	onPreview,
	onOk,
	onCancel,
	form: {
		validateFields,
		getFieldDecorator,
		getFieldsValue,
		resetFields,
	},
}) => {
	
	const formItemLayout = {
		labelCol: {
			span: 4,
		},
		wrapperCol: {
			span: 20,
		},
	};

	// 保存
	function handleSubmit() {
		validateFields((errors) => {
			if (errors) {
				return;
			}

			const formData = getFieldsValue();
			
			const data = {
				...formData,
			};

			onOk(data, () => {
				resetFields();
			});
		});
	}
	
	const options = [{
		value: '浙江',
		label: '浙江',
		children: [{
			value: '杭州',
			label: '杭州',
			children: [{
				value: '西湖',
				label: '西湖',
			}],
		}],
	}, {
		value: '江苏',
		label: '江苏',
		children: [{
			value: '南京',
			label: '南京',
			children: [{
				value: '中华门',
				label: '中华门',
			}],
		}],
	}];

	// 手机号校验
	function checkPhone(rule, value, callback) {
		if (value) {
			if (/^1[3|4|5|8|7][0-9]\d{8}$/.test(value.replace(/[^0-9]/g, ''))) { // 验证手机号格式
				callback();
			} else {
				callback(new Error("手机号格式不正确"));
			}
		} else {
			callback();
		}
	}
	
	// 上传组件
	const uploadProps = {
//		action: `${CONTEXTPATH}/commodity/upload`,
		action: '//jsonplaceholder.typicode.com/posts/',
		onChange(info) {

		},
	};
	
	const format = 'HH:mm';
	
	function disabledMinutes() {
			let result = [];
			for (var i = 0; i < 60; i++) {
					if (!(i === 0 || i === 30)) {
							result.push(i);
					}
			}
			return result;
	}
	
	const billTime = moment(dayilyBillTime).format('HH:mm');

	return (
		<Spin spinning={loading} tip="加载中...">
			<Form layout="horizontal" className={styles.form} >
			
				<FormItem 
					label="店主手机号码"
					{...formItemLayout}
				>
					<CommonPhoneInput placeholder="请输入店主手机号码" value={phone} suffix={<Button type="primary" size="small" onClick={onPhoneChange}>修改</Button>} disabled />
				</FormItem>
				
				<CommonSeparated title="基本信息" marginLeft="40" />
				
				<FormItem
						label="门店名称"
						hasFeedback
						{...formItemLayout}
				>
						{getFieldDecorator('name1', {
								initialValue: item.name,
								rules: [
										{required: true, message: "门店名称未填写"},
								],
						})(
								<Input type="text" placeholder="请输入门店名称" />
						)}
				</FormItem>
				
				<FormItem
						label="店主姓名"
						hasFeedback
						{...formItemLayout}
				>
						{getFieldDecorator('name2', {
								initialValue: item.name,
						})(
								<Input type="text" placeholder="请输入店主姓名" />
						)}
				</FormItem>
				
				<FormItem
						label="门店电话"
						hasFeedback
						{...formItemLayout}
				>
						{getFieldDecorator('name3', {
								initialValue: item.name,
						})(
								<Input type="text" placeholder="请输入门店电话" />
						)}
				</FormItem>
				
				<FormItem
						label="门店地址"
						hasFeedback
						{...formItemLayout}
				>
						{getFieldDecorator('name4', {
								initialValue: item.name,
								rules: [
									{ type: 'array' }
								]
						})(
								<Cascader options={options} placeholder="请选择门店地址" />
						)}
				</FormItem>
				
				<FormItem
					label="街道门牌号"
					hasFeedback
					{...formItemLayout}
				>
						{getFieldDecorator('name5', {
								initialValue: item.name,
						})(
								<Input type="text" placeholder="请输入街道门牌号" />
						)}
				</FormItem>
				
				<FormItem
					label="24小时营业"
					hasFeedback
					{...formItemLayout}
				>
						{getFieldDecorator('name6', {
								initialValue: item.name,
								valuePropName: 'checked',
								rules: [
									{ type: 'boolean' }
								]
						})(
								<Switch checkedChildren={'开'} unCheckedChildren={'关'} onChange={onSwitchChange} />
						)}
				</FormItem>
				
				{
					isAllDay ? null : (
						<FormItem
							label="门店营业时间"
							hasFeedback
							required
							{...formItemLayout}
						>
							<Row>
								<Col span="4" style={{width: 100}}>
									<FormItem
									>
										{getFieldDecorator('name7', {
												initialValue: item.name,
												rules: [
														{required: true, message: "开始时间未填写"},
												],
										})(
											<TimePicker
												disabledMinutes={disabledMinutes}
												hideDisabledOptions
												size="large"
												format={format}
											/>
										)}
									</FormItem>
								</Col>
								<Col span="1">
									<p className="ant-form-split">~</p>
								</Col>
								<Col span="4" style={{width: 100}}>
									<FormItem
									>
										{getFieldDecorator('name9', {
												initialValue: item.name,
												rules: [
														{required: true, message: "结束时间未填写"},
												],
										})(
											<TimePicker
												disabledMinutes={disabledMinutes}
												hideDisabledOptions
												size="large"
												format={format}
											/>
										)}
									</FormItem>
								</Col>
							</Row>
						</FormItem>
					)
				}
				
				<FormItem
						label="每日结算时间"
						help={`2月2日${billTime}到2月3日${billTime}结账的订单金额计入2月2日`}
						hasFeedback
						{...formItemLayout}
				>
						{getFieldDecorator('name8', {
								initialValue: moment(1092600000),
								rules: [
										{required: true, message: "每日结算时间未填写"},
								],
						})(
								<TimePicker
									disabledMinutes={disabledMinutes}
									hideDisabledOptions
									size="large"
									format={format}
									onChange={onBillTimeChange}
								/>
						)}
				</FormItem>
				
				<CommonToggle 
					title="添加更多信息" 
					right={20}
					body={
						(
							<div>
							
								<CommonSeparated title="门店主图" marginLeft="40" />
				
								<FormItem
										label=" "
										hasFeedback
										help="请上传一张店铺最美的照片，建议用前台、大厅、包间的照片、不建议用店招"
										colon={false}
										{...formItemLayout}
								>
										{getFieldDecorator('avatar', {
												initialValue: item.avatar,
										})(
												<CommonUpload {...uploadProps} fileList={mainMapList} />
										)}
								</FormItem>
								
								<CommonSeparated title="门店坏境图" marginLeft="40" />
				
								<FormItem
										label=" "
										hasFeedback
										colon={false}
										{...formItemLayout}
								>
										{getFieldDecorator('avatar2', {
												initialValue: item.avatar,
										})(
												<CommonUpload {...uploadProps} fileList={envMapList} maxLength={3} />
										)}
								</FormItem>

								<FormItem
										label=" "
										hasFeedback
										colon={false}
										{...formItemLayout}
								>
										<div className="clearfix" >
											<div className={styles.sampleGrape1} style={{}}></div>
											<div className={styles.sampleGrape2} ></div>
											<div className={styles.sampleGrape3} ></div>
											<div className={styles.sampleGrape4} ></div>
										</div>
								</FormItem>
							</div>
						)
					} 
				/>
				
				<FormItem>
					<Button type="primary" size="large" onClick={handleSubmit} style={{float: 'right'}}>提交</Button>
				</FormItem>
			</Form>
		</Spin>
	);
};

StoreInfoForm.propTypes = {
	onOk: PropTypes.func,
};

export default Form.create()(StoreInfoForm);